<template>
    <div class="add_store">
        <header>新增门店</header>
        <div class="form_contents">
            <div class="subject_name common">
                <p style="width:190px;">门店名称：</p>
                <el-input v-model.trim="input1" placeholder="给门店起个名字"></el-input>
            </div>
            <div class="store_address common">
                <p>门店地址：</p>
                <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:250px;"> </el-cascader>
            </div>
            <div class="store_detail_address common">
                <p>详细地址：</p>
                <el-input type="textarea" v-model.trim="input8" placeholder="请详细输入该门店的位置" @blur="getLo"></el-input>
            </div>
            <div class="longitude_Latitude common">
                <p>经纬度：</p>
                <el-input style="width:200px;margin-right:15px;" v-model.trim="input2" readonly></el-input>
                <el-input style="width:200px;" v-model.trim="input3" readonly></el-input>
                <span style="margin-left:20px;font-size:10px;color:#CDCDCD;">自动生成</span>
            </div>
            <div class="open_time common">
                <p>开业时间：</p>
                <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>
            </div>
            <div class="remark common">
                <p>备注：</p>
                <el-input type="textarea" v-model.trim="input7" placeholder="请输入该门店的备注"></el-input>
            </div>
            <div class="upload_img common">
                <p>上传门店图片：</p>
                <div class="up_imgs" style="display:flex;">
                    <img id="showImg" width="94" height="94" src="../../assets/images/market/upload.png" style="cursor:pointer;" alt="" @click.stop='autoClick' />
                    <input type="file" @change="onFileChange" style="display:none;" id="upfile" @click.stop='autoClick'> </div>
            </div>
            <div class="show_ad common">
                <p>营业状态：</p>
                <div class="radios">
                    <el-radio v-model="radio1" label="1">营业中</el-radio>
                    <el-radio v-model="radio1" label="0">关闭</el-radio>
                </div>
            </div>
            <div class="actions common">
                <p>券：</p>
                <el-input v-model.trim="input5" placeholder="请输入内容"></el-input>
            </div>
            <div class="links common">
                <p>荐：</p>
                <el-input v-model.trim="input6" placeholder="请输入内容"></el-input>
            </div>
            <div class="buttons common">
                <el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
                <el-button style="margin-left:20px;" @click.native="cancels">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery'
    import cityOptions from '@/assets/js/city_data_element.js'
    export default {
        name: 'add_store',
        data() {
            return {
                input1: '', //门店名称				
                radio1: '1', //1-营业中 0-关闭
                input2: '', //经度
                input3: '', //纬度      
                input5: '', //券
                input6: '', //荐
                input7: '', //备注
                input8: '', //详细地址
                value1: '', //开业时间
                options: cityOptions, //省市区所有数据
                selectedOptions: [], //选中的省市区
                imgU: '', //上传图片url
                jd: '', //经度
                wd: '', //纬度
            }
        },
        computed: {},
        created() {
        	//离开页面提醒
        	window.onbeforeunload = function(e) {
                var e = window.event || e;
                e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
            }
        },
        methods: {
            //取消
            cancels() {
                this.$confirm('此操作将不会保存信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        path: '/manages/store'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            //获取经纬度
            getLo() {
                let that = this;
                if(this.selectedOptions.length === 0) {
                    this.$alert('请选择门店地址', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input8 == '') {
                    this.$alert('请输入详细地址', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                /* 根据百度地图获取经纬度 */
                let urll = "http://api.map.baidu.com/geocoder/v2/?address=" + this.input8 + "&city=" + this.selectedOptions[1] + "&output=json&ak=f7GpjqXB2NkRGlzqIqywWTbo&callback=showLocation";
                $.ajax({
                    type: 'get',
                    url: urll,
                    dataType: 'jsonp',
                    success: function(res) {
                        //console.log(res);
                        if(res.status === 0) {
                            that.input2 = res.result.location.lng;
                            that.input3 = res.result.location.lat;
                        }
                    }
                })
            },
            //提交
            submits() {
                if(this.input1 == '') {
                    this.$alert('请输入门店名称', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.selectedOptions.length === 0) {
                    this.$alert('请选择门店地址', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input8 == '') {
                    this.$alert('请输入详细地址', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.value1 == '' || this.value1 === null) {
                    this.$alert('请输入开业时间', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.imgU == '') {
                    this.$alert('请上传图片', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input5 == '') {
                    this.$alert('请输入券', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input6 == '') {
                    this.$alert('请输入荐', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                /* 经纬度根据城市和详细地址生成 */
                let obj = {};
                obj.SHOPNAME = this.input1; //门店名称
                obj.PROVINCE = this.selectedOptions[0]; //省份
                obj.CITY = this.selectedOptions[1]; //城市
                /* 注意：北京、天津、上海、重庆这四个市没有区域，跟城市一样start */
                this.selectedOptions[2] ? obj.REGION = this.selectedOptions[2] : obj.REGION = this.selectedOptions[1]; //区域
                /* 注意：北京、天津、上海、重庆这四个市没有区域，跟城市一样end */
                obj.ADDRESS = this.input8; //详细地址
                obj.LONGITUDE = this.input2; //经度
                obj.LATITUDE = this.input3; //纬度
                obj.PRACTICETIME = this.value1.getTime(); //开业时间
                this.input7 ? obj.SHOPDESC = this.input7 : null; //备注 可以为空
                obj.PHOTO = this.imgU; //上传门店图片				
                obj.STATUS = Number(this.radio1); //营业状态(1、营业中 0、 关闭)				
                obj.CASHNAME = this.input5; //券				
                obj.PUSHNAME = this.input6; //荐                
                //console.log(obj);
                //return;
                let flagss = true; //防止重复提交
                if(!flagss) {
                    return false;
                }
                this.$axiosPost('/4SCAFE/ServShop/saveShop.action', obj).then(res => {
                    flagss = false;
                    console.log(res);
                    if(res.STATUS_CODE === 1) {
                        flagss = true;
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        setTimeout(() => this.$router.push({
                            path: '/manages/store'
                        }), 1500);
                    }
                })
            },
            //选择省份
            handleChange(value) {
                //console.log(value);
            },
            //自动点击
            autoClick() {
                document.getElementById("upfile").click();
            },
            //上传文件
            onFileChange($event) {
                //console.log($event);
                if($event.target.files.length == 0) {
                    return;
                }
                //图片预览fileReader
                let fr = new FileReader();
                fr.readAsDataURL($event.target.files[0]);
                let that = this;
                let sImg = document.getElementById('showImg');
                fr.onload = function(evt) {
                    //console.log(evt);					
                    sImg.src = evt.target.result;
                    that.imgU = evt.target.result.split(',')[1];
                }
                //console.log(that.imgU);
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-button {
        margin: 0 15px;
    }
    .add_store {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .form_contents {
            padding-bottom: 40px;
            p {
                white-space: nowrap;
                width: 150px;
                text-align: right;
            }
            width:97%;
            margin:25px auto;
            background:#fff;
            padding-top:40px;
            .common {
                width: 50%;
                margin: 26px auto;
                display: flex;
                align-items: center;
            }
            .first_b, .second_b, .third_b {
                img {
                    width: 22px;
                    height: 22px;
                    cursor: pointer;
                    margin-left: 10px;
                }
            }
            .upload_img {
                align-items: flex-start;
            }
            .store_detail_address, .actions, .links, .remark {
                width: 47.5%;
            }
            .subject_name {
                width: 51%;
            }
            .buttons {
                width: 30%;
            }
        }
    }
</style>